<template>
    <div v-if="payIndex == 2">
        <div class="search-box">
            <icon class="search-icon" type="search" size="14" color="#b2b2b2" />
            <input class="search-input" confirm-type="search" placeholder="搜索客户名称"
                placeholder-style="color: #9EA1BB;letter-spacing:2rpx;" @input="inputEnter" />
        </div>
        <div class="transverse-line row">
            <div class="transverse-right align-flex">
                <div class="previously align-flex row">
                    <div class="compositor align-flex compositor-none">
                        <poput-time display="true" :list='operateData' :default="operateIndex"
                            @cancel="bindPickerChangeOperate" />
                    </div>

                    <div class="compositor align-flex">
                        <picker @change="bindPickerChangeHandle" :value="sortIndexOperate" :range="longinsurHandle">
                            <view class="uni-input">{{ longinsurHandle[sortIndexOperate] }}</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                    </div>
                    <div class="align-flex">
                        <picker @change="bindPickerChangeMethod" :value="sortIndexMethod" :range="LongPlanInfoName">
                            <view class="uni-input">{{ LongPlanInfoName[sortIndexMethod] }}</view>
                        </picker>
                        <img class="transverse-down" src="/static/score/dropdown.png" alt="" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 第一个数据框 -->
        <div class="substance" v-for="(item) in longInsuranceData" :key="item?.companyId"
            @click="goCompany(item?.companyId, item?.dealId)">
            <div class="rubric-row">
                <div class="rubric">{{ item?.companyName }}</div>
                <div class="mode">
                    <span class="insurance-mode" v-if="item?.type === 3 || 4 || 5">{{ item?.type === 3 ? '灵活保单' :
                        item?.type === 4 ?
                            '月保单' : item?.type === 5 ? '即时生效' : '' }}</span>
                </div>
            </div>
            <div class="exercise-problems align-flex">
                <div class="nomenclature">录入日期：</div>
                <text class="explicit"> {{ item?.createTime }} </text>
            </div>
            <div class="circumstance align-flex">
                <div class="circumstance-left">
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">{{ item?.operationType == 0 ? '加保人数' : '减保人数' }}：</div>
                        <div class="explicit-block">
                            <img class="add-subtract" v-if="item?.operationType == 0"
                                src="@/static/longInsurance-detail/add.png" alt="">
                            <img class="add-subtract" v-if="item?.operationType == 1"
                                src="@/static/longInsurance-detail/reduce.png" alt="">
                            <span class="quantum-digit-child">{{ item?.total }}</span>
                        </div>
                    </div>
                    <div class="exercise-problems align-flex">
                        <div class="nomenclature">生效时间：</div>
                        <text class="explicit"> {{ item?.insurStartDate }} </text>
                    </div>
                </div>
            </div>
        </div>
        <no-Data v-if="longInsuranceTotalCount == ''"></no-Data>
        <!-- 第二个数据框 -->
        <!-- 选择昨天、今天、本周、本月数据弹窗 -->
        <!-- 运营数据  排序弹窗 -->
        <div>
            <uni-popup ref="thirdPopup" :type="type" background-color="#fff">
                <div class="second-popup third-popup">
                    <div class="select-spectacle">排序</div>
                    <div :class="[
                        'status-box',
                        sortSequence == item.id ? 'status-box-blue' : ''
                    ]" v-for="(item, index) in sorting" :key="index" @click="serialNumber(item.id)">
                        <div class="state-condition">{{ item.name }}</div>
                        <div class="hook" v-if="sortSequence == item.id">✔</div>
                    </div>
                </div>
            </uni-popup>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, defineProps } from 'vue'
import poputTime from '@/components/popup-custom-time/popup-custom-time.vue'
import noData from '@/components/no-data/no-data.vue'
import {
    getAddSubtract
} from '@/api/quick'
import user from '@/utils/user'
import { onLoad } from '@dcloudio/uni-app'
import { shake } from '@/utils/util'
import { insurancePreparation } from '@/api/signing'
import { toNumber } from '@vue/shared'
import { number } from 'echarts'
/* 销售记录昨天 弹窗 */

onLoad(async () => {
    await user.waitLogin()
    const nowyear = new Date().getFullYear()
    const nowmonth = new Date().getMonth() + 1
    startTime.value = formatDate(new Date(nowyear, nowmonth - 1, 1))
    endTime.value = formatDate(new Date(nowyear, nowmonth, 0))
    uni.$on('onCallBack2', function (data: any) {
        addSubtract()
        LongPlanData()
    })
    longCompany()
    uni.$on('onReachBottom2', function (data) {
        console.log('onReachBottom')
        getmore()
    })
})
const formatDate = (date: any) => {
    const myyear = date.getFullYear()
    let mymonth = date.getMonth() + 1
    let myweekday = date.getDate()
    if (mymonth < 10) {
        mymonth = "0" + mymonth
    }
    if (myweekday < 10) {
        myweekday = "0" + myweekday
    }
    return (myyear + "-" + mymonth + "-" + myweekday)
}
// 时间框选择
const time = ref([
    {
        name: '昨天',
        id: 1
    },
    {
        name: '今天',
        id: 2
    },
    {
        name: '本周',
        id: 3
    },
    {
        name: '本月',
        id: 4
    }
])

defineProps(['payIndex'])
// 运营数据  昨天、明天、本周、本月、自定义
const operateIndex = ref(3)
const itemRange = ref('' as string | undefined)
const operateData = ref(['昨天', '今天', '本周', '本月', '上月'])
const itemRangeThree = ref()
const itemRangeFour = ref()
const hasNextPage = ref(true)
const pageNum = ref(1)

// 时间选择器
const bindPickerChangeOperate = async (index: { index: number, time: string }) => {
    console.log(index, 'operateData')
    //   console.log(e.detail, 'e.detail')
    startTime.value = index.startTime
    endTime.value = index.endTime
    operateIndex.value = index.index
    itemRange.value = index.time
    itemRangeThree.value = itemRange.value.split(' 至 ')[0]
    itemRangeFour.value = itemRange.value.split(' 至 ')[1]
    pageNum.value = 1
    await addSubtract()
}

// 到达底部
const getmore = () => {
    if (!hasNextPage.value) {
        return
    }
    pageNum.value += 1
    addSubtract()
}

// 长期保投保方式数据
const LongPlanInfo = ref([] as { insuranceMethod: string, metho: string }[])

const LongPlanInfoName = ref([] as string[])
const LongPlanInfoType = ref([] as any[])

// 长期保投保方式
const type = ref()
const LongPlanData = async () => {
    const result = await insurancePreparation({})
    const resoutCopy = result.reverse().map((item:any, i:number) => {
        return {
            name: item.dictLabel,
            type: item.dictValue
        }
    })
    console.log(resoutCopy, '长期保投保方式11111222222')
    // LongPlanInfo.value.push(...result)
    // console.log(LongPlanInfo.value, '长期保投保方式2222222222')
    // LongPlanInfo.value.map((item:{name:string, type:number}) => {
    //     if(item.type === null){
    //       LongPlanInfoName.value.push('全部')
    //   } else {
    //
    //     }
    // })
    resoutCopy.map((item: any, index: number) => {
        if (resoutCopy.length === 1) {
            LongPlanInfoName.value.push(resoutCopy[0].name)
            type.value = item.type
            console.log(type, '111111111111111111111111111111111111111')
        } else {
            console.log(resoutCopy, '筛选接口type')
            if (item.type === null) {
                LongPlanInfoName.value.push(resoutCopy[0].name + '方式')
            } else {
                LongPlanInfoName.value[item.type - 2] = item.name
            }
        }
    })
    console.log(LongPlanInfoName.value, 'LongPlanInfoName3333333333333')
}

// /* 时间 弹窗 */
// const sortIndexTime = ref(0)
// const bindPickerChangeTime = async function (e:any) {
//   console.log('picker发送选择改变，携带值为', e.detail.value)
//   sortIndexTime.value = e.detail.value
//   pageNum.value = 1
//   await longInsuranceDetail()
// }

/* 全部方式 全部方式 弹窗 */
const sortIndexMethod = ref(0)
const bindPickerChangeMethod = async function (e: any) {
    console.log('全部方式，携带值为这个是啥', e.detail.value)
    sortIndexMethod.value = e.detail.value
    pageNum.value = 1
    await addSubtract()
}

// 全部保司 公司 变量
const sortIndexOperate = ref(0)
// const insuranceDate = ref(['100万'] as string[])
// 公司
const bindPickerChangeHandle = async (e: any) => {
    sortIndexOperate.value = e.detail.value
    console.log('picker发送选择改变，携带值为2222222222222222222222222', e.detail.value)
    pageNum.value = 1
    await addSubtract()
    console.log(sortIndexOperate.value, '哈哈哈哈哈哈')
}

// 获取长期保保司
const longCompanyName = ref(0)
const longCompanyNameAll = ref(0)
// 长期保方案类型
const longinsurHandle = ref(['全部操作', '加保', '减保'] as string[])
const longCompany = async () => {

}

const inputValue = ref('')

const inputEnter = (e: any) => {
    shake(() => {
        console.log(e.detail.value, 'eeeeeany')
        inputValue.value = e.detail.value.toString()
        console.log(inputValue.value, 'eeeeeany2222')
        pageNum.value = 1
        addSubtract()
    }, 300)
}
const startTime = ref('')
const endTime = ref('')
const longInsuranceData = ref([] as any)
const longInsuranceTotalCount = ref()
const addSubtract = async () => {
    if (pageNum.value == 1) {
        longInsuranceData.value = []
        pageNum.value = 1
        hasNextPage.value = true
    }
    console.log(LongPlanInfoType.value[sortIndexMethod.value], '这个是什么')
    console.log(inputValue.value, '100000')
    const result = await getAddSubtract({
        pageNum: pageNum.value,
        pageSize: 5,
        searchText: inputValue.value || '',
        startTime: operateIndex.value > 800 ? itemRangeThree.value : startTime.value,
        endTime: operateIndex.value > 800 ? itemRangeFour.value : endTime.value,
        operationType: sortIndexOperate.value === 0 ? '' : sortIndexOperate.value - 1,
        type: type.value ? type.value : toNumber(sortIndexMethod.value) === 0 ? '' : toNumber(sortIndexMethod.value) + 2
    })
    console.log(result, '投保明细3333333')
    if (!result.hasNextPage) {
        hasNextPage.value = false
    }
    console.log(hasNextPage.value, '小起小起')
    const arr = []
    arr.push(...longInsuranceData.value)
    arr.push(...result.list.map((item: any) => {
        item.createTime = item.createTime.split('-')[1] + '月' + item.createTime.split('-')[2] + '日'
        return item
    }))
    longInsuranceData.value = arr
    // eslint-disable-next-line no-return-assign
    console.log(longInsuranceData.value, 'longInsuranceData')
    longInsuranceTotalCount.value = result.totalCount
}

// 返回时间

/* 运营数据 排序 弹窗 */
const sortSequence = ref(1)
const sorting = ref([
    {
        name: '默认排序',
        id: 1
    },
    {
        name: '按付款时间倒序',
        id: 2
    },
    {
        name: '按付款时间正序',
        id: 3
    },
    {
        name: '按到期时间倒序',
        id: 4
    },
    {
        name: '按到期时间正序',
        id: 5
    }
])
const serialNumber = (params: number) => {
    sortSequence.value = params
}

const goCompany = (companyId: number, dealId: number) => {
    if (!dealId) {
    } else {
        console.log(companyId, '公司id', dealId, 'dealId')
        const company = companyId
        const deal = dealId
        uni.navigateTo({
            url: '/packageRemind/pages/longInsurance-detail/index?id=' + company + '&dealId=' + deal
        })
    }
}
</script>

<style lang="scss" scoped>
.transverse-line {
    box-sizing: border-box;
    color: #565868;
    font-size: $font-normal;

    .previously,
    .spectacle,
    .compositor {
        box-sizing: border-box;
        font-weight: 400;
    }
}

.previously {
    width: 100%;
}

.in-number {
    font-size: 28rpx;
    font-weight: 400;
    color: $grey;
    padding-top: 30rpx;
}

/* payIndex==1 部分 */
.search-box {
    margin: 30rpx 0;
}

.substance {
    margin: 30rpx 0;
    box-sizing: border-box;
    padding: 30rpx;
    background: #fff;

    .rubric-row {
        display: flex;

        .insurance-mode {
            background: #EBEFFE;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            padding: 8rpx 15rpx 10rpx;
            color: $blue;
            margin-left: 15rpx;
        }

        .rubric {
            font-size: 30rpx;
            font-weight: 600;
            color: $black;
            padding-bottom: 30rpx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .exercise-problems {
        padding-top: 30rpx;
        font-size: $font-normal;
        font-weight: 400;
        color: $grey;

        .explicit {
            color: $black;
        }

        .nomenclature {
            width: 165rpx;
        }
    }

    .circumstance-right {
        padding-left: 58rpx;
    }
}

.circumstance {
    margin-top: 24rpx;
    border-top: 1px solid #F4F4F7;
}

.transverse-down {
    width: 24rpx;
    height: 24rpx;
    margin-left: 8rpx;
}

.pop-up {
    border-radius: 16rpx;

    .choices {
        width: 750rpx;
        height: 564rpx;
        background: #ffffff;
        opacity: 1;
        box-sizing: border-box;
        padding: 30rpx;
        border-radius: 16rpx;

        .custom-img {
            width: 36rpx;
            height: 36rpx;
        }

        .select-while {
            font-size: $font-medium;
            font-weight: bold;
            color: $black;
            padding: 30rpx;
        }
    }

    .choices-picker {
        height: 800rpx;
    }

    .sequence-time {
        padding: 20rpx 30rpx 27rpx 29rpx;
        display: flex;
        justify-content: space-between;

        .specific-blue {
            color: $blue;
        }

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }
}

.second-popup {
    width: 750rpx;
    height: 388rpx;
    background: #ffffff;
    box-sizing: border-box;
    padding: 60rpx 60rpx 27rpx 60rpx;

    .select-spectacle {
        font-size: $font-medium;
        font-weight: bold;
        color: $black;
    }

    .status-box {
        color: #565868;
        padding-top: 50rpx;
        display: flex;
        justify-content: space-between;

        .hook {
            width: 20rpx;
            height: 13rpx;
            color: $blue;
        }
    }

    .status-box-blue {
        color: $blue;
    }
}

.third-popup {
    height: 564rpx;
}

.transverse-right {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.compositor {
    padding-left: 30rpx;
}

.compositor-none {
    padding-left: 0;
}

.company-type {}

.all-type {
    display: flex;
    align-items: center;
    padding-bottom: 30rpx;

    .tips-box {
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        background: #F4F4F7;
        padding: 8rpx 15rpx 11rpx 15rpx;
        margin-left: 16rpx;
    }

    .company-type {
        background: #EBEFFE;
        color: #3E5FF5;
    }
}

.table-title {
    font-size: 24rpx;
}

.explicit-block {
    display: flex;
    align-items: center;
}

.add-subtract {
    width: 35rpx;
    height: 35rpx;
}

.quantum-digit-child {
    margin-left: 16rpx;
}
</style>
